<template>
  <div class="box">
    <shop-header></shop-header>
    <shop-intro></shop-intro>
    <shop-time></shop-time>
    <shop-add @reduce="handleReduce" @add="handleAdd"></shop-add>
    <shop-tourist></shop-tourist>
    <add-tourist v-show="item" :num="2"></add-tourist>
    <add-tourist v-show="item1" :num="3"></add-tourist>
    <add-tourist v-show="item2" :num="4"></add-tourist>
    <add-tourist v-show="item3" :num="5"></add-tourist>
    <shop-pay :num="number" ></shop-pay>

  </div>
</template>
<script>
  import ShopHeader from './component/Header.vue'
  import ShopIntro from './component/introduction'
  import ShopTime from './component/Time'
  import ShopAdd from './component/Add'
  import  ShopTourist from './component/Tourist'
  import  AddTourist from './component/AddTourist'
  import  ShopPay from './component/pay'
export default {
    name: 'ShopGlobal',
    components: {
      ShopHeader,
      ShopIntro,
      ShopTime,
      ShopAdd,
      ShopTourist,
      AddTourist,
      ShopPay

    },
  data () {
      return {
        number: 1,
        index:0,
        item : false,
        item1 :false,
        item2 : false,
        item3 : false,
      }
  },
  // create () {
  //   this.handleReduce() ;
  // },
  methods: {
    handleReduce (num) {
      this.number = num;
      switch (this.number) {
        case 1 :{this.item = false; this.item1 = false; this.item2 = false;
          this.item3 = false; break;}
        case 2 :{this.item = true; this.item1 = false; this.item2 = false;
          this.item3 = false; break;}
        case 3 :{this.item = true; this.item1 = true; this.item2 = false;
          this.item3 = false; break;}
        case 4 :{this.item = true; this.item1 = true; this.item2 = true;
          this.item3 = false; break;}
        case 5 :{this.item = true; this.item1 = true; this.item2 = true;
          this.item3 = true; break;}
      }
      if(this.number>=6) {
        alert("你好，最多可以添加5名游客，抱歉！")
      }
    },
    handleAdd (num) {
      this.number = num;
      switch (this.number) {
        case 1 :{this.item = false; this.item1 = false; this.item2 = false;
          this.item3 = false; break;}
        case 2 :{this.item = true; this.item1 = false; this.item2 = false;
          this.item3 = false; break;}
        case 3 :{this.item = true; this.item1 = true; this.item2 = false;
          this.item3 = false; break;}
        case 4 :{this.item = true; this.item1 = true; this.item2 = true;
          this.item3 = false; break;}
        case 5 :{this.item = true; this.item1 = true; this.item2 = true;
          this.item3 = true; break;}
      }
      if(this.number>=5) {
        alert("你好，最多可以添加5名游客，抱歉！")
      }
   }
 }
  }
</script>
<style scoped>


</style>
